<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>消息模板管理 - 废物回收管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="container-fluid">
            <!-- 标题和创建按钮 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4>消息模板管理</h4>
                <a href="/template/create" class="btn btn-primary">
                    <i class="fas fa-plus"></i> 创建模板
                </a>
            </div>

            <!-- 搜索和过滤 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" action="/template/list" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">消息类型</label>
                            <select name="type" class="form-select" th:value="${type}">
                                <option value="">全部类型</option>
                                <option value="ORDER">订单通知</option>
                                <option value="SYSTEM">系统通知</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">状态</label>
                            <select name="status" class="form-select" th:value="${status}">
                                <option value="">全部状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">关键词</label>
                            <input type="text" class="form-control" name="keyword" th:value="${keyword}" 
                                   placeholder="搜索模板代码或名称">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 模板列表 -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>模板代码</th>
                                    <th>模板名称</th>
                                    <th>消息类型</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:if="${templates.empty}">
                                    <td colspan="6" class="text-center">暂无数据</td>
                                </tr>
                                <tr th:each="template : ${templates}">
                                    <td th:text="${template.code}"></td>
                                    <td th:text="${template.name}"></td>
                                    <td>
                                        <span th:if="${template.type == 'ORDER'}" class="badge bg-primary">订单通知</span>
                                        <span th:if="${template.type == 'SYSTEM'}" class="badge bg-info">系统通知</span>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" 
                                                   th:checked="${template.status == 1}"
                                                   th:data-id="${template.id}"
                                                   onchange="toggleStatus(this)">
                                        </div>
                                    </td>
                                    <td th:text="${#temporals.format(template.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                                    <td>
                                        <a th:href="@{/template/edit/{id}(id=${template.id})}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button class="btn btn-sm btn-outline-danger" 
                                                th:data-id="${template.id}"
                                                onclick="deleteTemplate(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 切换模板状态
            function toggleStatus(checkbox) {
                const id = checkbox.dataset.id;
                const status = checkbox.checked ? 1 : 0;
                
                fetch(`/template/${id}/status?status=${status}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    if (!response.ok) {
                        throw new Error('操作失败');
                    }
                    showToast('success', '状态更新成功');
                }).catch(error => {
                    checkbox.checked = !checkbox.checked;
                    showToast('error', error.message);
                });
            }
            
            // 删除模板
            function deleteTemplate(button) {
                const id = button.dataset.id;
                
                if (!confirm('确定要删除该模板吗？')) {
                    return;
                }
                
                fetch(`/template/${id}`, {
                    method: 'DELETE'
                }).then(response => {
                    if (!response.ok) {
                        throw new Error('删除失败');
                    }
                    showToast('success', '删除成功');
                    button.closest('tr').remove();
                }).catch(error => {
                    showToast('error', error.message);
                });
            }
        </script>
    </th:block>
</body>
</html> 